<template>
  <div class="page-list-live">
    <PageList>
      <template #header>视频监控</template>
      <template #table>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-row>
          <el-col :span="isCollapse ? 0 : 5">
            <el-tree ref="tree" :data="treeData" show-checkbox default-expand-all node-key="id" highlight-current :props="defaultProps" @check="treeCheck"></el-tree>
          </el-col>
          <el-col :span="isCollapse ? 24 : 19">
            <el-row ref="video" :gutter="20">
              <el-col v-for="item in treeData[0].children" v-show="checkedNodes.find(node => node.id === item.id)" :key="item.id" :span="8">
                <videoRtsp :id="item.id" :rtsp="item.url" :width="videoWidth"></videoRtsp>
                <div style="text-align: center;">{{ item.name }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </PageList>
  </div>
</template>

<script>
  import listMixin from '@/mixins/list'
  import { VideoSearch } from '@/api/video'
  import request from '@/utils/request.js'
  import videoRtsp from '@/components/VideoRtsp'
  export default {
    components: {
      videoRtsp
    },
    mixins: [
      listMixin
    ],
    data() {
      const _this = this
      return {
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        treeData: [{ id: 0, name: '视频列表', children: [] }],
        videoWidth: '200',
        isCollapse: false,
        checkedNodes: []
      }
    },
    created() {
      this.VideoSearch()
    },
    mounted() {
      this.videoWidth = (this.$refs.video.$el.clientWidth / 3 - 20).toFixed(0)
      window.onresize = () => {
        this.videoWidth = (this.$refs.video.$el.clientWidth / 3 - 20).toFixed(0)
      }
    },
    methods: {
      async VideoSearch() {
        let res = await VideoSearch({ pageIndex: 0, pageSize: 100 })
        if (res.data.items.length) {
          this.treeData[0].children = []
          this.treeData[0].children = res.data.items
        }
      },
      treeCheck(data, check) {
        this.checkedNodes = check.checkedNodes
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
